import React, { useMemo } from 'react';
import { Col, Form, Row } from 'antd';

import InfoFormItem from '@/components/InfoFormItem';
import CardSecondLevel from '@/components/CardSecondLevel';
import { PLATFORM_INFO_FORM_LAYOUT } from '@/utils/const';
import { transformStorage } from '@/utils/format';
import DataCard from '@/components/DataCard';

const DevicesAccess = (props: { loading: boolean; data: any }) => {
  const { loading, data = {} } = props;
  const {
    recv_pictures,
    store_pictures,
    structured_pictures,
    pic_face_objs,
    pic_body_objs,
    pic_vehicle_objs,
    pic_nonvehicle_objs,
    cloud_store_videos,
    structured_videos,
    video_face_objs,
    video_body_objs,
    video_vehicle_objs,
    video_nonvehicle_objs,
    used_storage = 0,
    total_storage = 0,
    total_pictures,
    added_pictures,
    total_videos = 0,
    added_videos = 0,
  } = data;

  // 格式化存储单位
  const storage_unix = useMemo(() => {
    const used_storage_unix = transformStorage(used_storage);
    const total_storage_unix = transformStorage(total_storage);
    const total_videos_unix = transformStorage(total_videos);
    const added_videos_unix = transformStorage(added_videos);
    return [
      used_storage_unix,
      total_storage_unix,
      total_videos_unix,
      added_videos_unix,
    ];
  }, [data]);

  const images = {
    infos: [
      {
        label: '接收图片数量',
        value: `${recv_pictures} 张`,
      },
      {
        label: '已存储图片数量',
        value: `${store_pictures} 张`,
      },
      {
        label: '已处理图片数量',
        value: `${structured_pictures} 张`,
      },
    ],
    structures: [
      {
        label: '人脸目标数量',
        value: `${pic_face_objs} 个`,
      },
      {
        label: '人体目标数量',
        value: `${pic_body_objs} 个`,
      },
      {
        label: '机动车目标数量',
        value: `${pic_vehicle_objs} 个`,
      },
      {
        label: '非机动车目标数量',
        value: `${pic_nonvehicle_objs} 个`,
      },
    ],
  };

  const videos = {
    infos: [
      {
        label: '云存储视频路数',
        value: `${cloud_store_videos} 路`,
      },
      {
        label: '已处理视频任务数',
        value: `${structured_videos} 个`,
      },
    ],
    structures: [
      {
        label: '人脸目标数量',
        value: `${video_face_objs} 个`,
      },
      {
        label: '人体目标数量',
        value: `${video_body_objs} 个`,
      },
      {
        label: '机动车目标数量',
        value: `${video_vehicle_objs} 个`,
      },
      {
        label: '非机动车目标数量',
        value: `${video_nonvehicle_objs} 个`,
      },
    ],
  };

  const originalLibrary = [
    {
      label: '原始库已用/总容量',
      value: `${storage_unix[0]}/${storage_unix[1]} PB`,
    },
    {
      label: '图片库图片总数',
      value: `${total_pictures} 张`,
    },
    {
      label: '今日新增图片数',
      value: `${added_pictures} 张`,
    },
    {
      label: '视频库视频总量',
      value: `${storage_unix[2]} PB`,
    },
    {
      label: '今日新增视频量',
      value: `${storage_unix[3]} PB`,
    },
  ];

  return (
    <>
      <DataCard
        title="平台（统计今日数据）"
        style={{ padding: 24 }}
        loading={loading}
      >
        <Row gutter={64}>
          <Col span={8}>
            <CardSecondLevel title="图片存储与结构化" />
            <Form {...PLATFORM_INFO_FORM_LAYOUT}>
              {images.infos.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
              <div style={{ height: 40 }} />
              {images.structures.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
          <Col span={8}>
            <CardSecondLevel title="视频存储与结构化" />
            <Form {...PLATFORM_INFO_FORM_LAYOUT}>
              {videos.infos.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
              <div style={{ height: 40 }} />
              {videos.structures.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
          <Col span={8}>
            <CardSecondLevel title="原始库" />
            <Form {...PLATFORM_INFO_FORM_LAYOUT}>
              {originalLibrary.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
        </Row>
      </DataCard>
    </>
  );
};

export default DevicesAccess;
